require(['./config'],() => {
    require(['swiper','template','header','footer','info','jquery'],(Swiper,template) =>{
        class Index{
            constructor(){
                this.getBannerData();
            }
            init(){
                // 初始化swiper
                new Swiper('#banner .swiper-container', {
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: {
                      delay: 10000,
                      disableOnInteraction: false,
                    },
                    pagination: {
                      el: '#banner .swiper-pagination',
                      clickable: true,
                    },
                    navigation: {
                      nextEl: '#banner .swiper-button-next',
                      prevEl: '#banner .swiper-button-prev',
                    },
                });

                new Swiper('#section-4 .swiper-container', {
                // slidesPerView: 1,
                // spaceBetween: 30,
                loop: true,
                pagination: {
                    el: '#section-4 .swiper-pagination',
                    clickable: true,
                    type: 'fraction'
                },
                navigation: {
                    nextEl: '#section-4 .swiper-button-next',
                    prevEl: '#section-4 .swiper-button-prev',
                    },
                });

                new Swiper('#section-5 .swiper-container', {
                    slidesPerView: 4,
                    centeredSlides: false,
                    width: 1279,
                    // spaceBetween: 30,
                    pagination: {
                      el: '#section-5 .swiper-pagination',
                      clickable: true,
                    },
                  
                    navigation: {
                      nextEl: '#section-5 .swiper-button-next',
                      prevEl: '#section-5 .swiper-button-prev',
                    },
                });

                new Swiper('#section-5 .swiper-container', {
                    slidesPerView: 4,
                    centeredSlides: false,
                    width: 1279,
                    // spaceBetween: 30,
                    pagination: {
                      el: '#section-5 .swiper-pagination',
                      clickable: true,
                    },
                    navigation: {
                      nextEl: '#section-5 .swiper-button-next',
                      prevEl: '#section-5 .swiper-button-prev',
                    },
                });
                  
                new Swiper('#section-6 .swiper-container', {
                    slidesPerView: 3,
                    centeredSlides: false,
                    // spaceBetween: 30,
                    pagination: {
                      el: '#section-6 .swiper-pagination',
                      clickable: true,
                    },
                    navigation: {
                      nextEl: '#section-6 .swiper-button-next',
                      prevEl: '#section-6 .swiper-button-prev',
                    },
                });
            }
            // 获取轮播图的数据
            getBannerData(){
                // 发送请求
                $.ajax({
                    url:'/lib/indexBannerMock.json',
                    dataType:'json'
                })
                .then(res => {
                    // console.log(res);
                    if(res.code === 200){
                        var list = res.result_body;
                        var html = template('indexBannerTemplate',{list})
                        // console.log(html)
                        // console.log($('.index_BannerswiperWrapper'));
                        $('.index_BannerswiperWrapper').html(html);

                        //页面HTML标签加载完毕后再写JS代码
                        this.init();
                    }
                })

                //第二个轮播图
                $.ajax({
                    url:'http://rap2api.taobao.org/app/mock/277677/v2/section-3',
                    dataType:'json'
                })
                .then(res => {
                    // console.log(res);
                    // 渲染页面
                    if(res.code === 200){
                        var html1 = template('sextion-3Template',{data:res.data});
                        // console.log(html1);
                        $('#section-3 .swiper-wrapper').html(html1);
                        this.section3SwiperInit();
                    }
                })
            }

            //初始化第二个轮播图
            section3SwiperInit(){
                new Swiper('#section-3 .swiper-container', {
                    slidesPerView: 1,
                    spaceBetween: 30,
                    loop: true,
                    pagination: {
                      el: '#section-3 .swiper-pagination',
                      clickable: true,
                    },
                    navigation: {
                      nextEl: '#section-3 .swiper-button-next',
                      prevEl: '#section-3 .swiper-button-prev',
                    },
                });
            }

        }
        return new Index();
    })
})
